﻿@model CoverFlow.Web.Models.CoverFlow.Web.Models.MovieTrailers

@{
    ViewBag.Title = "HTML5 Cover Flow";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>

<style type="text/css">
    body{ background: black;}
    #coverFlow { height: 500px; width: 100%; text-align: center; vertical-align: middle; position: relative; z-index: -999999; -moz-perspective: 1500px; -ms-perspective: 1500px; -webkit-perspective: 1500px; perspective: 1500px; overflow: hidden;margin-top: 200px; }
        #coverFlow div { position: absolute; top: 20px; display: none;border-radius: 10px;border: 1px solid black;-moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; }
            #coverFlow div img { height: 400px;opacity: 0; }
            #titleDiv{ text-align: center;font-size: 24px;font-weight: bold;color: #fff;}
</style>

<div id="coverFlow">
    @foreach (var trailer in Model.Trailers)
    {
        <div data-title="@trailer.Info.Title" style="background-image: url(@trailer.Poster.ExtraLarge);">
            <img src="@trailer.Poster.ExtraLarge" />

        </div>
    }
</div>
<div id="titleDiv"></div>
    
<script src="@Url.Content("~/scripts/jquery-2.0.2.min.js")"></script>

    <script type="text/javascript">

        var sbi = 150;
        var sbsi = 250;
        var scale = 1;
        var angle = -60;
        var pageCount;

        var duration = 1;
        //more than one item
        var d1 = .5;
        // single item
        var d2 = .3;
        var step = (1000 / 60) / 1000;
        var t;
        var interval;

        var selectedIndex = 0;
        var aIndex = 0;

        var start;
        var end;

        var items = new Array();
        var tempItems = new Array();
        var loadedItems = new Array();
        var parentWidth;
        var busy = false;

        $(function() {
            Init();
        });


        function Init() {
            parentWidth = $("#coverFlow").width();
            pageCount = Math.ceil(((parentWidth / 2) - sbsi) / sbi);

            $("#coverFlow>div").each(function(i) {
                var item = $(this);
                items.push(item);
                loadedItems.push(false);
                item.css({ left: parentWidth / 2 - item.width() / 2 });
                item.click(function (e) {
                    setIndex(i);
                });
            });


            layoutItems();
            $("#titleDiv").text(items[selectedIndex].data("title"));
        }

        //$("#coverFlow").click(function(e) {
        //    setIndex(selectedIndex + 8);
        //});

        function setIndex(value) {
            if (value < 0)
                value = 0;
            if (value >= items.length)
                value = items.length - 1;

            if (selectedIndex == value)
                return;

            if (Math.abs(selectedIndex - value) > 1)
                duration = d1;
            else {
                duration = d2;
            }

            if (interval)
                interval = window.clearInterval(interval);

            selectedIndex = value;
            start = aIndex;
            end = selectedIndex - aIndex;
            play();
            $("#titleDiv").text(items[selectedIndex].data("title"));
        }

        function play() {
            t = 0;
            interval = setInterval(loop, step * 1000);
        }

        function loop() {
            if (t > duration) {
                interval = window.clearInterval(interval);
                aIndex = selectedIndex;
                layoutItems();
                return;
            }
            t += step;
            if (busy)
                return;
            aIndex = easeOutCubic(t, start, end, duration);
            layoutItems();
        }

        function layoutItems() {
            busy = true;
            for (var i = 0; i < tempItems.length; i++) {
                tempItems[i].hide();
            }

            tempItems.splice(0, tempItems.length);

            if (items.length == 0)
                return;

            var si = Math.round(aIndex, 0);
            if (si < 0)
                return;
            for (var x = 0; x <= pageCount + 1; x++) {
                if (x == 0) {
                    layout(items[si], si);
                    continue;
                }
                if (si - x > -1)
                    layout(items[si - x], si - x);
                if (si + x < items.length)
                    layout(items[si + x], si + x);
            }
            busy = false;
            //for (var i = 0; i < items.length; i++) {
            //    layout(items[i], i);
            //}
        }

        function layout(item, index) {
            item.show();

            tempItems.push(item);
            if (!loadedItems[index] && item.width() > 4) {
                item.css({ left: parentWidth / 2 - item.width() / 2 });
                loadedItems[index] = true;
            }

            var t = -(aIndex - index);
            var tk = sbsi;
            var tr = angle;
            var ts = scale;
            var d = items.length - index;
            //var tz = -200;

            if (t < 1 && t > -1) {
                tk *= t;
                tr *= t;
                var tab = Math.abs(t);
                ts += (1 - scale) * (1 - tab);
                //tz += (1 +200) * (1 - tab);
            } else if (t > 0) {
                tk += sbi * (t - 1);
            } else if (t < 0) {
                tk = -tk + (sbi * (t + 1));
                tr = -tr;
                d = Math.floor(t);
            }

            item.css({ transform: "translateX(" + tk + "px) rotateY(" + tr + "deg) scale(" + ts + "," + ts + ") ", zIndex: d });

        }

        function next() {
            if (selectedIndex + 1 >= items.length) {
                setIndex(0);
                return;
            }
            setIndex(selectedIndex + 1);
        }

        function prev() {
            if (selectedIndex == 0) {
                setIndex(items.length - 1);
                return;
            }
            setIndex(selectedIndex - 1);
        }

        function pageUp() {
            setIndex(selectedIndex + pageCount);
        }

        function pageDown() {
            setIndex(selectedIndex - pageCount);
        }

        function first() {
            setIndex(0);
        }

        function last() {
            setIndex(items.length - 1);
        }

        function easeOutCubic(t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        }
        
        if (document.addEventListener) {
            // IE9, Chrome, Safari, Opera
            document.addEventListener("mousewheel", MouseWheelHandler, false);
            // Firefox
            document.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
        }
            // IE 6/7/8
        else document.attachEvent("onmousewheel", MouseWheelHandler);

        function MouseWheelHandler(e) {
            // cross-browser wheel delta
            var e = window.event || e; // old IE support
            var delta = -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
            setIndex(selectedIndex + delta);
        }


        $(document).keydown(function(e) {

            //alert(e.keyCode);

            if (e.keyCode == 37) {
                prev();
                return false;
            }
            if (e.keyCode == 38) {
                pageDown();
                return false;
            }
            if (e.keyCode == 39) {
                next();
                return false;
            }
            if (e.keyCode == 40) {
                pageUp();
                return false;
            }
            if (e.keyCode == 33) {
                pageDown();
                return false;
            }
            if (e.keyCode == 34) {
                
                pageUp();
                return false;
            }
            if (e.keyCode == 36) {
                first();
                return false;
            }
            if (e.keyCode == 35) {
                last();
                return false;
            }
        });

    </script>


    
</body>
</html>